<template>
  <d2-container>
    <div class="tdesign-demo-block">
      <t-alert theme="info" message="有XXX条申述未处理">
        <!-- <template #operation> -->
        <!-- <span @click="handleOperation">立即处理</span> -->
        <!-- </template> -->
      </t-alert>
    </div>

    <div>
      <t-button @click="setFilters">清除筛选条件</t-button>
      <span style="padding-left: 36px">已选筛选条件：{{ filterValue }}</span>
    </div>

    <t-table
      rowKey="key"
      :columns="columns"
      :data="data"
      :filter-value="filterValue"
      @filter-change="onFilterChange"
      :pagination="pagination"
      @change="onChange"
      @page-change="onPageChange"
    />
  </d2-container>
</template>

<script>
const data = []
const TOTAL = 60
for (let i = 0; i < TOTAL; i++) {
  data.push({
    key: i,
    firstName: i % 2 === 0 ? '共有' : '私有',
    lastName: '<a href="#">d</a>',
    email: ['-', '0', '[]', '{}'][i % 4],
    createTime: i % 4 === 0 ? '2022-04-01' : '2022-12-01'
  })
}
export default {
  data() {
    return {
      data,
      filterValue: {},
      columns: [
        {
          // 自定义表头渲染
          title: '姓名',
          // 渲染列所需字段
          colKey: 'firstName',
          // 单选过滤配置 过滤规则
          filter: {
            // 过滤形式 单选
            type: 'single',
            // 是否显示重置和确认
            // showConfirmAndReset: true,
            // 用于配置当前筛选器可选值有哪些
            list: [
              { label: 'anyone', value: '' },
              { label: 'Heriberto', value: 'Heriberto' },
              { label: 'Eric', value: 'Eric' }
            ]
          }
        },
        {
          title: 'LastName',
          colKey: 'lastName',
          // 多选过滤配置
          filter: {
            type: 'multiple',
            // 是否显示重置取消按钮，一般情况不需要显示
            showConfirmAndReset: true,
            list: [
              { label: 'All', checkAll: true },
              { label: 'Skures', value: 'Skures' },
              { label: 'Purves', value: 'Purves' }
            ]
          }
        },
        {
          title: 'Email',
          colKey: 'email',
          // 输入框过滤配置
          filter: {
            type: 'input',
            resetValue: '@',
            props: {
              placeholder: '输入关键词过滤',
              clearable: true
            },
            // 是否显示重置取消按钮
            showConfirmAndReset: true
          }
        },
        {
          title: 'Date',
          colKey: 'createTime',
          // 自定义过滤组件
          filter: {
            component: (h) => <t-date-picker clearable />
          }
        }
      ],
      /** 非受控用法：与分页组件对齐（此处注释为非受控用法示例，代码有效，勿删） */
      // pagination: {
      //   defaultCurrent: 2,
      //   defaultPageSize: 5,
      //   total: TOTAL,
      //   showJumper: true,
      // },
      /** 受控用法：与分页组件对齐（此处注释为受控用法示例，代码有效，勿删） */
      pagination: {
        current: 1,
        pageSize: 10,
        // TOTAL
        total: data.length,
        showJumper: true,
        // 也可以监听表格组件的 page-change 事件进行处理
        // 还可以使用表格组件的 change 事件处理变化。排序、分页、过滤等发生变化时都会触发 change 事件
        onChange: (pageInfo) => {
          this.pagination.current = pageInfo.current
          this.pagination.pageSize = pageInfo.pageSize
        }
      }
    }
  },
  methods: {
    // filters 参数包含自定义过滤组件 日期选择器 的值
    onFilterChange(filters) {
      this.filterValue = filters
      // 模拟异步请求进行数据过滤
      this.request(this.filterValue)
    },
    setFilters() {
      this.filterValue = {}
      this.data = data
    },
    filterIcon(h) {
      // console.log(h);
      return <i>icon</i>
    },
    request(filters) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        this.data = data.filter((item) => {
          let result = true
          if (filters.firstName) {
            result = item.firstName === filters.firstName
          }
          if (result && filters.lastName && filters.lastName.length) {
            result = filters.lastName.includes(item.lastName)
          }
          if (result && filters.email) {
            result = item.email.indexOf(filters.email) !== -1
          }
          if (result && filters.createTime) {
            result = item.createTime === filters.createTime
          }
          return result
        })
      }, 100)
    },
    // 分页、排序、过滤等操作触发均会触发 change 事件
    onChange(params, context) {
      console.log('change:', params, context)
    },
    // 分页变化时触发该事件
    onPageChange(pageInfo) {
      // console.log("page-change:", pageInfo);
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.pagination.total = this.data.length
        this.pagination.current = 1
      }
    }
  }
}
</script>

<style scoped>
.tdesign-demo-block{
  margin-bottom: 30px;
}
</style>
